<!--
 * @Description: 
 * @Author: charles
 * @Date: 2021-05-05 22:02:56
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2021-12-22 17:09:38
-->
<template>
  <div ref="bottom4_container" style="height:95%"> </div>
</template>

<script>
import { DualAxes } from '@antv/g2plot';
export default {
  mounted() {
    this.initChart()
  },
  methods:{
    initChart(){

const data = [
  { year: '2019-03', value: 3, count: 10 },
  { year: '2019-04', value: 4, count: 4 },
  { year: '2019-05', value: 3.5, count: 5 },
  { year: '2019-06', value: 5, count: 5 },
  { year: '2019-07', value: 4.9, count: 4.9 },
  { year: '2019-08', value: 6, count: 35 },
  { year: '2019-09', value: 7, count: 7 },
  { year: '2019-10', value: 9, count: 1 },
  { year: '2019-11', value: 13, count: 20 },
];

const dualAxes = new DualAxes(this.$refs.bottom4_container, {
  data: [data, data],
  xField: 'year',
  yField: ['value', 'count'],
  geometryOptions: [
    {
      geometry: 'line',
      smooth: false,
      color: '#5B8FF9',
      label: {
        formatter: (datum) => {
          return `${datum.value}个`;
        },
      },
      lineStyle: {
        lineWidth: 3,
        lineDash: [5, 5],
      },
    },
    {
      geometry: 'line',
      smooth: true,
      color: '#5AD8A6',
      lineStyle: {
        lineWidth: 4,
        opacity: 0.5,
      },
      label: {
        formatter: (datum) => {
          return `${datum.count}个`;
        },
      },
      point: {
        shape: 'circle',
        size: 4,
        style: {
          opacity: 0.5,
          stroke: '#5AD8A6',
          fill: '#fff',
        },
      },
    },
  ],
});

dualAxes.render();

    } 
  }
}
</script>
